<!--
 * @Descripttion : 
 * @Autor        : Lilong
 * @Date         : 2022-09-07 15:59:32
 * @LastEditTime : 2022-09-09 00:43:33
 * @FilePath     : \响应性语法糖\组合式API中\App.vue
-->
<template>
    <div>$ref宏函数：</div>
    <button @click="add">{{ count }}</button><br>
  
    <div>$()解构</div>
    <div>{{name}}</div>
  </template>
  
  <script setup>
    //无需显示导入，但更明显，可以显示导入
    //import { $ref } from 'vue/macros'
    import {watch, reactive} from 'vue'
  
    let count = $ref(0)
    //$ref 宏函数，无需.value，宏函数是基于运行时的他最终还是会转换成ref 加.value  只不过vue帮我们做了这个操作了
    console.log(count) 
    const add = () => {
      count++
    }
    //不能直接监听count，因为编译之后就是 count.value 并不是一个ref对象所以watch 无法监听而且会抛出一个警告，
    //需要$$ 符号 就是再让他编译的时候变成一个ref 对象不加.value
    //$$符号，也可以在组合式函数的return中包裹整个返回对象 
    watch($$(count),(v)=>{
        console.log(v)
    })
    setInterval(()=>{
        count++
    },1000)
  
    //$()解构：
    //可以在使用组合式函数(hooks)时，用$()解构，依然会保持响应性
    //可以在组合式函数(hooks)中，用$()包裹传来的参数，则可以将该参数转为响应式变量
    const obj = reactive({
        name: '小满'
    })
    
    let { name } = $(obj);
    
    setTimeout(()=>{
      name = '大满'
    },2000)
  
  </script>
  
  <style lang="less">
  </style>
  